<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/hotel-info.css">
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
    <!-- 百度地图 -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=3.0&ak=BhI8joPPFX8zDlFGtvHllfFR7lOigChD"></script>
</head>

<body>
    <!-- 导航 -->
    <div class="top">
        <div>门店详情</div>
    </div>
    <!-- 轮播 -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./assets/images/hotel1.jpg" alt=""></div>
            <div class="swiper-slide"> <img src="./assets/images/hotel2.jpg" alt=""></div>
            <div class="swiper-slide"> <img src="./assets/images/hotel3.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="hotelinfo">
        <div class="hotelinfo_title">
            创想第一门店
        </div>
        <div class="hotelinfo_address">
            广东省深圳市福田区华强北街道振兴路341号上步工业区
        </div>
        <div class="map" id="map"></div>
        <div class="hotelinfo_desc">
            <div class="desc_title">简介</div>
            <div>这里是极速创想第一门店</div>
        </div>
        <div class="hotelinfo_desc">
            <div class="desc_title">详情</div>
            <div>这里是极速创想第一门店，欢迎你的预订入住</div>
        </div>
    </div>
</body>

</html>
<script src="./assets/js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        autoplay: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
    //百度地图
    var map = new BMap.Map("map", {
        coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
        // 指定完成后API将以指定的坐标类型处理您传入的坐标
    });
    var point = new BMap.Point(113.3265410, 23.1057070);  // 创建点坐标  
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    //判断是否为手机端
    var isTouch = ('ontouchstart' in window);

    if (isTouch) {
        $(".carousel").on('touchstart', function (e) {
            var that = $(this);
            var touch = e.originalEvent.changedTouches[0];
            var startX = touch.pageX;
            var startY = touch.pageY;
            $(document).on('touchmove', function (e) {
                touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                var endX = touch.pageX - startX;
                var endY = touch.pageY - startY;
                if (Math.abs(endY) < Math.abs(endX)) {
                    if (endX > 10) {
                        $(this).off('touchmove');
                        that.carousel('prev');
                    } else if (endX < -10) {
                        $(this).off('touchmove');
                        that.carousel('next');
                    }
                    return false;
                }
            });
        });
        $(document).on('touchend', function () {
            $(this).off('touchmove');
        });
    }
</script>